<!DOCTYPE html>
<html>
<head>
	<title>opacity透明度动画</title>
	<meta charset="utf-8">
	<style type="text/css">
	*{margin: 0;padding: 0;}
	div{
		width: 200px;
		height: 200px;
		margin:10px;
		background: red;
		filter: alpha(opacity:30);//兼容ie
		opacity: 0.3;
		float: left;
	}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oDiv=document.getElementsByTagName('div');
			for (var i = 0; i < oDiv.length; i++) {
				oDiv[i].alpha=30;
				oDiv[i].onmouseover=function(){
					startMove(this,100);
				}
				oDiv[i].onmouseout=function(){
					startMove(this,30);
				}
			}
		}

		//var alpha=30;多物体运动不能共用timer计时器和alpha
		function startMove(obj,iTarget){
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
				var speed=0;
				if (obj.alpha<iTarget) {
					speed=10;
				}else{
					speed=-10;
				}
				if (obj.alpha==iTarget) {
					clearInterval(obj.timer);
				}
				else{
					obj.alpha+=speed;
					obj.style.filter='obj.alpha(opacity:'+obj.alpha+')';
					obj.style.opacity=obj.alpha/100;
				}

			},30)
		}
	</script>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
	<div id="div4"></div>
</body>
</html>